import React, { Component } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import { Loading, SpNote, SpNavBar } from '@/components'
import api from '@/api'
import { hasNavbar } from '@/utils'
import { withPager, withBackToTop } from '@/hocs'
import Taro from '@tarojs/taro'

import './agent-teamLeaderList.scss'

@withPager
@withBackToTop
export default class agentArea extends Component {
  constructor(props) {
    super(props)

    this.state = {
      ...this.state,
      list: []
    }
  }

  componentDidMount() {
    Taro.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#21B991'
    })
    this.nextPage()
  }

  async fetch(params) {
    const { agentId } = Taro.getStorageSync('userinfo')
    const { page_no: page, page_size: pageSize } = params
    const query = {
      page,
      pageSize,
      agent_id: agentId
    }

    const { total_count, list } = await api.agent.teamLeaderList(query)

    this.setState({
      list: [...this.state.list, ...list]
    })

    return {
      total: total_count
    }
  }
  // 时间戳转化
  formatDate(now) {
    if (!now) {
      return ''
    }
    now = now * 1000
    const date = new Date(now)
    let y = date.getFullYear() // 年份
    let m = date.getMonth() + 1 // 月份，注意：js里的月要加1
    let d = date.getDate() // 日
    let h = date.getHours() // 小时
    let min = date.getMinutes() // 分钟
    let s = date.getSeconds() // 秒
    // 返回值，根据自己需求调整，现在已经拿到了年月日时分秒了
    let time = `${y}年${m}月${d}日 ${h}:${min}:${s}`
    return time
  }
  render() {
    const { list, page, scrollTop } = this.state

    return (
      <View className='page-distribution-teamLeaderList'>
        <SpNavBar title='团长' leftIconType='chevron-left' />
        <ScrollView
          className={`trade-list__scroll ${hasNavbar && 'trade-list__scroll_web'}`}
          scrollY
          scrollTop={scrollTop}
          onScrollToLower={this.nextPage}
        >
          <View className='section list'>
            {list.map((item) => {
              return (
                <View className='list-item' key={item.order_id}>
                  <View className='list-item-txt'>
                    <View className='order-no'>
                      <Text className='key'>团长姓名：</Text>
                      {item.promoter_name}
                    </View>
                    <View className='order-no'>
                      <Text className='key'>团长手机：</Text>
                      {item.telephone}
                    </View>
                    <View className='order-no'>
                      <Text className='key'>加入时间：</Text>
                      {this.formatDate(item.created)}
                    </View>
                  </View>
                </View>
              )
            })}
          </View>
          {page.isLoading ? <Loading>正在加载...</Loading> : null}
          {!page.isLoading && !page.hasNext && !list.length && (
            <SpNote img='trades_empty.png'>暂无数据~</SpNote>
          )}
        </ScrollView>
      </View>
    )
  }
}
